﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Management System</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">School Management System</h1>

    <!-- Schools Form -->
    <div class="card mb-4">
        <div class="card-header">Add or Update School</div>
        <div class="card-body">
            <form id="schoolForm">
                <input type="hidden" id="schoolId">
                <div class="form-group">
                    <label for="schoolName">School Name:</label>
                    <input type="text" class="form-control" id="schoolName" name="schoolName" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit School</button>
            </form>
        </div>
    </div>

    <!-- Classrooms Form -->
    <div class="card mb-4">
        <div class="card-header">Add or Update Classroom</div>
        <div class="card-body">
            <form id="classroomForm">
                <input type="hidden" id="classroomId">
                <div class="form-group">
                    <label for="classroomName">Classroom Name:</label>
                    <input type="text" class="form-control" id="classroomName" name="classroomName" required>
                    <label for="classroomSchoolId">School ID:</label>
                    <input type="number" class="form-control" id="classroomSchoolId" name="classroomSchoolId" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit Classroom</button>
            </form>
        </div>
    </div>

    <!-- Students Form -->
    <!-- Students Form -->
    <div class="card mb-4">
        <div class="card-header">Add or Update Student</div>
        <div class="card-body">
            <form id="studentForm">
                <input type="hidden" id="studentId">
                <div class="form-group">
                    <label for="studentName">Student Name:</label>
                    <input type="text" class="form-control" id="studentName" name="studentName" required>
                    <label for="studentAge">Age:</label>
                    <input type="number" class="form-control" id="studentAge" name="studentAge" required>
                    <label for="studentClassroomId">Classroom ID:</label>
                    <input type="number" class="form-control" id="studentClassroomId" name="studentClassroomId" required>
                    <label for="studentSchoolId">School ID:</label>
                    <input type="number" class="form-control" id="studentSchoolId" name="studentSchoolId" required>
                </div>
                <button type="submit" class="btn btn-primary">Submit Student</button>
            </form>
        </div>
    </div>


    <!-- Tables for displaying data -->
    <div id="dataDisplay">
        <h2>Schools</h2>
        <table class="table table-bordered" id="schoolsTable">
            <thead>
            <tr>
                <th>School ID</th>
                <th>Name</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <h2>Classrooms</h2>
        <table class="table table-bordered" id="classroomsTable">
            <thead>
            <tr>
                <th>Classroom ID</th>
                <th>Name</th>
                <th>School ID</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <h2>Students</h2>
        <table class="table table-bordered" id="studentsTable">
            <thead>
            <tr>
                <th>Student ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Classroom ID</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <!-- Log Table -->
    <div id="logDisplay">
        <h2>Logs</h2>
        <table class="table table-bordered" id="logsTable">
            <thead>
            <tr>
                <th>Log ID</th>
                <th>Timestamp</th>
                <th>Action</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
